<template>
  <div class="selfForm">
    <el-form ref="ruleForm" :model="form" v-bind="$attrs" :rules="rules">
      <el-row :gutter="20">
        <el-col v-for="item in formItem" :key="item.key" :span="item.col || col" :offset="item.offset|| 0">
          <el-form-item
            :label="item.label"
            :prop="item.key"
            :label-width="item.w"
            :class="item.class"
          >
            <!-- 输入框 -->
            <el-input
              v-if="item.type === 1"
              v-model.trim="form[item.key]"
              :style="item.style"
              v-bind="item.tagAttrs || {}"
              v-on="item.listeners"
            />
            <!-- 下拉框 -->
            <el-select
              v-else-if="item.type === 2"
              v-model="form[item.key]"
              v-bind="item.tagAttrs || {}"
              v-on="item.listeners"
            >
              <el-option
                v-for="(sub,index) in item.options"
                :key="'select-'+sub.value+'-'+index"
                :label="sub.label"
                :value="sub.value"
                :disabled="!!sub.disabled"
              />
            </el-select>
            <!-- 单选 -->
            <el-radio-group
              v-else-if="item.type ===3"
              v-model="form[item.key]"
              v-on="item.listeners"
            >
              <el-radio
                v-for="(sub,index) in item.options"
                :key="'radio-'+sub.value+'-'+index"
                :label="sub.value"
                v-bind="item.tagAttrs || {}"
              >
                {{ sub.label }}
              </el-radio>
            </el-radio-group>
            <!-- 复选框 -->
            <el-checkbox-group
              v-else-if="item.type ===4"
              v-model="form[item.key]"
              v-bind="item.tagAttrs || {}"
              v-on="item.listeners"
            >
              <el-checkbox
                v-for="(sub,index) in item.options"
                :key="'checkbox-'+sub.value+'-'+index"
                :label="sub.value"
              >
                {{ sub.label }}
              </el-checkbox>>
            </el-checkbox-group>
            <!-- 日期区间控件:可选值   1.datetime  2.date 3.daterange-->
            <el-date-picker
              v-else-if="item.type ===5"
              v-model="form[item.key]"
              :editable="false"
              v-bind="item.tagAttrs || {}"
              :type="item.dateType || 'daterange'"
              value-format="timestamp"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              v-on="item.listeners"
            />
            <!-- 级联框 -->
            <el-cascader
              v-else-if="item.type ===6"
              ref="cascader"
              v-model="form[item.key]"
              :style="item.style"
              v-bind="item.tagAttrs || {}"
              :options="item.options"
              v-on="item.listeners"
            />
            <!-- 显示文本 -->
            <span
              v-else-if="item.type ===7"
              v-bind="item.tagAttrs || {}"
              v-text="form[item.key]"
            />
            <slot
              v-else-if="item.slot"
              :name="item.type"
              :row="{...form,...{key: item.key}}"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <slot name="btn" />
  </div>
</template>

<script>
export default {
  props: {
    form: {
      type: Object,
      default: () => {}
    },
    rules: {
      type: Object,
      default: () => {}
    },
    formItem: {
      type: Array,
      default: () => []
    },
    col: {
      type: Number,
      default: 8
    }
  },
  methods: {
    // 提交表单 对整个表单进行校验的方法
    submitForm() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          this.$emit('onPass')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 对整个表单进行重置，将所有字段值重置为初始值并移除校验结果
    resetForm() {
      this.$refs['ruleForm'].resetFields()
    },
    // 移除表单项的校验结果   Function(props: array | string)
    clearValidate(props) {
      this.$refs['ruleForm'].clearValidate(props)
    },
    // 对部分表单字段进行校验的方法
    validateField(props) {
      this.$refs['ruleForm'].clearValidate(props)
    }
  }
}
</script>

<style lang="scss" scoped>
  .selfForm {
    ::v-deep {
      .el-row {
        display: flex;
        flex-wrap: wrap;
      }
      .el-form-item {
        display: flex;
      }
      .el-form-item__label {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #4A4A4A;
      }
      .el-form-item__content {
        display: flex;
        flex: 1;
      }
      .el-input,.el-select,.el-date-editor,.el-cascader,.el-radio-group {
        width: 100%;
      }
      .el-radio-group {
        display: flex;
      }
      .el-radio {
        display: flex;
        align-items: center;
        height:100%;
      }
    }
    .btn-right {
      ::v-deep {
        .el-form-item__content {
          justify-content: flex-end;
        }
      }
    }
  }
</style>
